<template>
    <div>
        <!--中奖记录-->
        <div class="appraise-record positionRLCT" v-if="hiddenModule">
            <div class="record-title">{{prizeRecord.isCurrent ? '本' : '往'}}{{prizeRecord.title}}</div>
            <div class="chart-no-data displayFlex flexCenter" v-if="!prizeRecord.list || ( Array.isArray(prizeRecord.list) && prizeRecord.list.length == 0 )">
                <p class="text-center">暂无中奖记录</p>
            </div>
            <div class="appraise-record-wscroll positionR" v-else-if="prizeRecord.isScorll">
                <scroller
                    ref="myscroller"
                    :on-refresh="refresh"
                    :on-infinite="infinite">
                    <ul class="list-over-auto appraise-record-list" v-for="prizeRecordItem in prizeRecord.list" >
                        <li class="appraise-result displayFlex justifyCtBwt">
                            <span>
                                <span v-if="prizeRecord.isCurrent">本</span><span v-else>第{{prizeRecordItem.periods}}</span>期/{{getTime(prizeRecordItem.startTime,'yy.MM.dd').slice(5)}}-{{getTime(prizeRecordItem.endTime,'yy.MM.dd').slice(5)}}
                            </span>
                            <span>平均估价: {{prizeRecordItem.averageValue || 0}}</span>
                        </li>
                        <li v-for="winnersModel in prizeRecordItem.winnersModels" >
                            <span class="displayBlock positionR price-step-box">
                                <span class="price-step ">{{prizeStep(winnersModel.rewardLevel)}}</span>
                                <img class="price-step-img" :src="staticImageUrl('images/appraise/act_price_step.png')" alt="">
                            </span>
                            <span class="displayBlock price-name">{{winnersModel.rewardLevelDesc}}{{winnersModel.awardNum}}个</span>
                            <div class="user-wlist" v-if="Array.isArray(winnersModel.awardUserModels) && winnersModel.awardUserModels.length > 0">
                                <user-list :userProp="{list:userListObj(winnersModel.awardUserModels)}"></user-list>
                            </div>
                        </li>
                        <li  v-if="(Array.isArray(prizeRecordItem.winnersModels) && prizeRecordItem.winnersModels.length == 0) || !prizeRecordItem.winnersModels">
                            <div class="chart-no-data displayFlex flexCenter more-no-data" >
                                <p class="text-center">暂无中奖记录</p>
                            </div>
                        </li>
                    </ul>
                    <div class="width-full text-center" v-if="prizeRecord.isShowMore" >
                        <span class="appraise-check-more" @click="$emit('showHistoryRecord')">查看更多</span>
                    </div>
                </scroller>
            </div>
            <div v-else>
                <ul class="appraise-record-list" v-for="(prizeRecordItem,key) in prizeRecord.list" v-if="key == 0">
                    <li class="appraise-result displayFlex justifyCtBwt">
                        <span>
                            <span v-if="prizeRecord.isCurrent">本</span><span v-else>第{{prizeRecordItem.periods}}</span>期/{{getTime(prizeRecordItem.startTime,'yy.MM.dd').slice(5)}}-{{getTime(prizeRecordItem.endTime,'yy.MM.dd').slice(5)}}</span>
                        <span>平均估价: {{prizeRecordItem.averageValue  || 0}}</span>
                    </li>
                    <li v-for="winnersModel in prizeRecordItem.winnersModels" >
                        <span class="displayBlock positionR price-step-box">
                            <span class="price-step ">{{prizeStep(winnersModel.rewardLevel)}}</span>
                            <img class="price-step-img" :src="staticImageUrl('images/appraise/act_price_step.png')" alt="">
                        </span>
                        <span class="displayBlock price-name">{{winnersModel.rewardLevelDesc}}{{winnersModel.awardNum}}个</span>
                        <span class="user-wlist" v-if="winnersModel.awardUserModels">
                            <user-list :userProp="{list:userListObj(winnersModel.awardUserModels)}" @clickUserHeader="clickUserHeader"></user-list>
                        </span>
                    </li>
                    <li  v-if="(Array.isArray(prizeRecordItem.winnersModels) && prizeRecordItem.winnersModels.length == 0) || !prizeRecordItem.winnersModels">
                        <div class="chart-no-data displayFlex flexCenter" >
                            <p class="text-center">暂无中奖记录</p>
                        </div>
                    </li>
                </ul>
                <div class="width-full text-center" v-if="!prizeRecord.list || ( Array.isArray(prizeRecord.list) && prizeRecord.list.length > 1 )">
                    <span class="appraise-check-more" @click="$emit('showHistoryRecord')">查看更多</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PrizeRecord",
        props: {
            prizeRecordProp: Object
        },
        data() {
            return {
                hiddenModule:true,
                prizeRecord: {
                    "title": '期中奖用户',
                    "isScorll":false,
                    "curPage":1,
                    "totalPages":1,
                    'id':3,
                    "isShowMore":true,
                    "isOvrFlAt":false,
                    // "list": [
                    //     {
                    //         "periods": "三",                                        //----第几期
                    //         "interactId": 321,
                    //         "startTime": 1564641454000,
                    //         "endTime": 1567060654000,
                    //         "averageValue": "367.5",                               //----平均估价
                    //         "winnersModels": [{
                    //             "rewardLevel": 3,                              //----奖励等级
                    //             "awardNum": 3,                                 //----奖品数量
                    //             "rewardLevelDesc": "奖! 奖!",                   //----奖励等级描述
                    //             "awardUserModels": [                           //----获奖者列表信息
                    //                 {
                    //                     "userId": 3464,                        //----获奖者信息
                    //                     "myself": false,                       //----是否是本人
                    //                     "userName": "san",                     //----用戶名稱
                    //                     "photoUrl": "http://xxxxxa.jpg",       //----用户头像
                    //                     "answerReward": true,                  //----是否是答案奖励
                    //                     "answer": "33.4",                       //----用户参与答案
                    //                 }
                    //             ]
                    //         }
                    //     ]}
                    // ]
                }
            }
        },
        mounted() {
            this.prizeRecord = Object.assign({}, this.prizeRecord, this.prizeRecordProp);
            this.hiddenPrizeRecord()
        },
        methods:{
            userListObj(Array){
                let tempObj = {};
                let tempList = [];
                Array.forEach((value,index)=>{
                    tempObj= {
                        userId: value.userId,
                        name: value.userName,
                        image: value.photoUrl,
                        description: '',
                        rightText: value.answer,
                    }
                    tempList.push(tempObj)
                })
                return tempList
            },
            hiddenPrizeRecord(){
                let prizeLength = this.prizeRecord.list && this.prizeRecord.list.length;
                if(prizeLength == 0 && (prizeLength == 1 && (Array.isArray(this.prizeRecord.list[0].winnersModels) && this.prizeRecord.list[0].winnersModels.length == 0) || !this.prizeRecord.list[0].winnersModels)){
                    this.hiddenModule = false;
                }
            },
            /*改变奖等信息*/
            prizeStep(num){
                switch (num) {
                    case 0:return '特等奖';break;
                    case 1:return '一等奖';break;
                    case 2:return '二等奖';break;
                    case 3:return '三等奖';break;
                    case 4:return '四等奖';break;
                    case 5:return '五等奖';break;
                    case 9:return '幸运奖';break;
                }
            },
            refresh(){
                let that = this;
                let tempObj={
                    loadMore:false,
                    curPage:that.prizeRecord.curPage,
                    totalPages:that.prizeRecord.totalPages,
                    id:that.prizeRecord.id
                }
                setTimeout(()=>{
                    that.$emit('loadingMore',tempObj);
                    that.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
            infinite(){
                let that = this;
                let tempObj={
                    loadMore:true,
                    curPage:that.prizeRecord.curPage,
                    totalPages:that.prizeRecord.totalPages,
                    id:that.prizeRecord.id
                }
                that.$refs.myscroller.finishInfinite(true);//刷新完毕关闭刷新的转圈圈
                setTimeout(()=>{
                    that.$emit('loadingMore',tempObj);
                    that.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
                },500)
            },
            clickUserHeader(val){
                this.$emit('clickUserHeader',val)
            }
        },
        watch: {
            prizeRecordProp(val) {
                this.prizeRecord = Object.assign({}, this.prizeRecord, val);
            }
        },
        components: {
            'user-list': () => import('../../../../components/commonComponents/usersList/UserList'),
        }
    }
</script>

<style scoped lang="scss">
    .appraise-record {
        width: 3.43rem;
        border-radius: .08rem;
        padding-bottom: .16rem;
        background-color: #fff;
        margin-bottom: .12rem;
    }
    .appraise-record-wscroll{
        padding-top: .2rem;
        overflow: auto;
        height: 60vh;
    }
    .record-title {
        color: #fff;
        padding: 0 .16rem;
        padding-top: .16rem;
        font-size: .18rem;
        padding-bottom: .3rem;
        border-top-left-radius: .1rem;
        border-top-right-radius: .1rem;
    }

    .appraise-result {
        font-size: .16rem;
        color: #fff;
        margin-bottom: .25rem;
    }

    .price-step {
        position: absolute;
        left: 0;
        top: 0;
        width: .6rem;
        height: .22rem;
        line-height: .22rem;
        text-align: center;
        display: inline-block;
        font-size: .12rem;
        color: #995900;
    }
    .price-name {
        padding-top: .15rem;
        color: #fff;
    }

    .user-wlist {
        display: block;
        padding-top: .15rem;
    }
    .price-step-box{
        left: -.15rem;
    }
    .appraise-check-more {
        display: inline-block;
        padding: .05rem .1rem;
        background-color: transparent;
        color: #FFDC08;
        font-size: .14rem;
        border: 1px solid #FFDC08;
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }
    .price-step-img{
        width: .6rem;
        height: .22rem;
    }
    .appraise-record-list{
        li{
            padding: 0 .16rem;
        }
    }
    /*.list-over-auto{*/
        /*max-height: 50vh;*/
        /*overflow: auto;*/
    /*}*/
    .appraise-record-wlist{
        max-height: 50vh;
        overflow: auto;
    }
    .chart-no-data{
        color: rgba(255,255,255,.4);
        min-height: 1.5rem;
    }
    .more-no-data{
        color: #333;
    }
</style>